<template>
  <div id="data-view" ref="fullscreenElement" :style="'width: '+screenWidth+';height:'+screenHeight"  element-loading-text="正在加载中..." v-loading="loading">
    <!--    <dv-full-screen-container>-->
    <el-container :style="'width: '+screenWidth+';height:'+screenHeight" class="full-screen-container">
      <div class="d-flex jc-center" style="padding: 10px 30px 5px">
        <dv-decoration2 style="width:33.3%; height:5px;" />
        <div class="d-flex jc-center">
          <dv-decoration8 :color="['#568aea', '#000000']" style="width:200px;height:50px;" />
          <div class="title">
            <span class="title-text " @click="handleFullscreen">生产管理看板</span>
            <dv-decoration6  :color="['#50e3c2', '#67a1e5']"
                          :reverse="true"
                          class="title-bototm"
                          font-size=“0.2rem;”
                          style="width:300px;height:15px;" />
          </div>
          <dv-decoration8 :color="['#568aea', '#000000']"
                       :reverse="true"
                       style="width:200px;height:50px;"/>
        </div>
        <dv-decoration2 style="width:33.3%; height:5px;" />
      </div>
      <div class="date">
        <div class="block" style="margin-bottom: 15px">
          <span class="demonstration" style="margin-right: 10px">年度选择</span>
          <el-date-picker
              v-model="yearSearch"
              style="width: 90px"
              type="year"
              value-format="YYYY"
              @change="yearSearchChange">
          </el-date-picker>
        </div>
        <div style="padding-right: 8px">
          <span>
            {{ nowDate + ' ' + nowTime + ' ' + nowWeek }}
          </span>
        </div>
      </div>
      <div class="main-container">
        <top-left-cmp ref="topLeftCmp" :year="yearSearch"/>
        <top-middle-cmp ref="topMiddleCmp" :year="yearSearch"/>
        <top-right-cmp ref="topRightCmp" :year="yearSearch"/>
      </div>
    </el-container>
    <!--    </dv-full-screen-container>-->
  </div>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount} from 'vue';
import TopLeftCmp from "./TopLeftCmp.vue";
import TopMiddleCmp from "./TopMiddleCmp.vue";
import TopRightCmp from "./TopRightCmp.vue";

const yearSearch = ref(null);
const fullScreen = ref(false);
const loading = ref(true);
const screenWidth = ref((window.screen.width) + 'px');
const screenHeight = ref((window.screen.height) + 'px');
const nowDate = ref('');
const nowTime = ref('');
const nowWeek = ref('');
const interval = ref(null);
const isMounted = ref(false);

// 模板引用
const fullscreenElement = ref(null);
const topLeftCmp = ref(null);
const topMiddleCmp = ref(null);
const topRightCmp = ref(null);
// 生命周期钩子
onMounted(() => {
  isMounted.value = true;
  cancelLoading();
  currentTime();
  document.addEventListener("keydown", handleKeyPress);
});

onBeforeUnmount(() => {
  isMounted.value = false;
  document.removeEventListener("keydown", handleKeyPress);
  if (interval.value) clearInterval(interval.value);
});
const yearSearchChange = () => {
  loading.value = true;
  try {
    topLeftCmp.value?.onMountedHandler();
    topMiddleCmp.value?.onMountedHandler();
    topRightCmp.value?.onMountedHandler();
  } catch (error) {
    console.error('Error during yearSearchChange:', error);
  } finally {
    setTimeout(() => {
      loading.value = false;
    }, 1000);
  }
};
const cancelLoading = () => {
  setTimeout(() => {
    loading.value = false;
  }, 2000);
};
const getDate = () => {
  const now = new Date();
  const yy = now.getFullYear();
  const mm = now.getMonth() + 1;
  const dd = now.getDate();
  const week = now.getDay();
  const hh = now.getHours();
  const mf = now.getMinutes().toString().padStart(2, '0');

  const weekMap = {
    1: "星期一",
    2: "星期二",
    3: "星期三",
    4: "星期四",
    5: "星期五",
    6: "星期六",
    0: "星期日"
  };

  nowWeek.value = weekMap[week];
  nowTime.value = `${hh}:${mf}`;
  nowDate.value = `${yy}/${mm}/${dd}`;
};
const currentTime = () => {
  getDate();
  interval.value = setInterval(getDate, 1000);
};
const handleKeyPress = (event) => {
  if (event.key === "F11") {
    event.preventDefault();
    fullScreen.value ? exitFullscreen() : enterFullscreen();
  }
};
const handleFullscreen = () => {
  fullScreen.value ? exitFullscreen() : enterFullscreen();
};

const enterFullscreen = () => {
  const el = fullscreenElement.value;
  if (!el) return;

  const methods = [
    'requestFullscreen',
    'mozRequestFullScreen',
    'webkitRequestFullscreen',
    'msRequestFullscreen'
  ];

  const method = methods.find(m => el[m]);
  if (method) el[method]();
  fullScreen.value = true;
};

const exitFullscreen = () => {
  const methods = [
    'exitFullscreen',
    'mozCancelFullScreen',
    'webkitExitFullscreen',
    'msExitFullscreen'
  ];

  const method = methods.find(m => document[m]);
  try {
    if (method) document[method]();
    fullScreen.value = false;
  }catch (e) {
  }

};
</script>

<style lang="scss" scoped>
.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.jc-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.jc-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#data-view {
  min-height: 1080px;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url("./img/bg.png");
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .full-screen-container {
    background-image: url("./img/bg.png");
    transform: scale(1);
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .title {
    position: relative;
    width: 500px;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;

    .title-text {
      font-size: 1.8rem;
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translate(-50%);
    }

    .title-bototm {
      position: absolute;
      bottom: -20px;
      left: 50%;
      transform: translate(-50%);
    }
  }

  .date {
    text-align: right;
    padding: 0 50px;
  }

  .main-header {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    .mh-middle {
      font-size: 24px;
    }
  }

  .main-container {
    height: calc(100% - 100px);
    display: flex;
  }
}
</style>
